<template>
	<view class="">
		<view class="" :style="{ paddingTop: statusH+10 + 'px' }">

		</view>
		<navigator hover-class="none" class="nav-box" open-type="navigateBack">
			<u-icon name="arrow-left" color="#000000" label-color="#000000" :size="20" :label-size="18"
				label="添加银行卡"></u-icon>
		</navigator>
		<view class="item">
			<view class="bag flex items-center">
				<view class="left f2">
					持卡人姓名
				</view>
				<view class="right f6">
					<input type="text" placeholder="请填写持卡人姓名" placeholder-class="inpplay" v-model="name">
				</view>
			</view>
			<view class="bag flex items-center">
				<view class="left f2">
					开户银行
				</view>
				<view class="right flex justify-between f6" @click="show=true">
					<input type="text" disabled="true" v-model="ssyy.yh_title" placeholder="请选择开户行"
						 placeholder-class="inpplay">
					<image src="@/static/right.png" mode="widthFix" style="width: 32rpx;"></image>
				</view>
			</view>
			<view class="bag flex items-center">
				<view class="left f2">
					银行卡号
				</view>
				<view class="right f6">
					<input type="number" placeholder="请填写持卡人银行卡号"  placeholder-class="inpplay" v-model="banknumber">
				</view>
			</view>
			<view class="bag flex items-center">
				<view class="left f2">
					预留手机号	
				</view>
				<view class="right f6">
					<input type="number" placeholder="请填写银行预留手机号"  placeholder-class="inpplay" v-model="phone">
				</view>
			</view>
		</view>

		<view class="btn flex-center" @click="submit()">
			确认
		</view>
		<image src="@/static/logo.png" mode="widthFix" class="botbg">
			<u-picker :show="show" :columns="columns" @cancel="show=false" @confirm="confirm"
				keyName="yh_title"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiovalue1: '1',
				banknumber:'',
				value: '',
				show: false,
				id_car: '',
				name: '',
				icon: '',
				id: '',
				statusH: 0,
				phone:'',
				ssyy: '',
				columns: [
					[]
				],
				navbarH: 0,
				info: '',
			};

		},
		onShow(e) {
			console.log('e', e)
		},
		onLoad(o) {
			this.getWinTop().then(res => {
				this.statusH = res.statusBar;
				this.navbarH = res.navbar;
			});
			if (o.info) {
				console.log('o.info', o.info)
				this.value = JSON.parse(o.info).text
				console.log('this.value', this.value)
				this.icon = JSON.parse(o.info).value
			}
			if (o.id) {
				this.id = o.id
				console.log('this.id', this.id)
				// this.bank()
			}
			this.bank()
		},
		methods: {
			confirm(e) {
				console.log('confirm', e)
				this.ssyy = e.value[0]
				this.show = false
			},
			bank() {

				this.$api.bank({}).then((res => {
					const convertToColumns = (array) => {
						return [array.map(item => item)];
					};
					this.columns = convertToColumns(res.data);
					console.log(this.columns);


				}))
			},
			groupChange(e) {
				console.log(e, '1')
			},
			leftClick() {
				uni.reLaunch({
					url: '/views/user/bank/bank'
				})
			},
			radioChange(e) {
				console.log(e, '2')
			},
			submit() {
				
				if (!this.name) {
					this.$msg.msg('请输入持卡人姓名')
					return;
				}

				if (!this.ssyy) {
					this.$msg.msg('请选择开户银行')
					return;
				}

				if (!this.banknumber) {
					this.$msg.msg('请输入银行卡号')
					return;
				}
				if(!this.yanzheng(this.banknumber)){
					this.$msg.msg('请输入正确的银行卡号')
					return;
				}
				if (!this.phone) {
					this.$msg.msg('请输入预留手机号')
					return;
				}
				var phoneNumberRegex = /\b1[3-9]\d{9}\b/;
				if (!phoneNumberRegex.test(this.phone)) {
					this.$msg.msg('请输入正确的预留手机号')
					return;
				} 
				
				this.$api.add_bank_card({
					name:this.name,
						bankid:this.ssyy.id,
						bankname:this.ssyy.yh_title,
						bank_card_number:this.banknumber,
						mobile:this.phone
				}).then(res=>{
					
					this.$msg.msg('添加成功')
					setTimeout(function() {
									uni.navigateBack()
					}, 1000);
				})

			},
			yanzheng(car) {
				car = car.replace(/\s/g, '').replace(/-/g, '');
				// 银行卡号正则表达式（目前一般为16位或19位数字）
				var regex = /^[0-9]{16}$|^[0-9]{19}$/;

				// 验证银行卡号是否匹配正则表达式
				return regex.test(car);
			}

		}
	}
</script>

<style lang="scss">
	.inpplay{
		color:#CCCED1;font-size: 28rpx;
	}
	page {
		background: #F7FBFF;
	}

	.item {
		margin: 0 auto;
		width: 686rpx;
		// height: 448rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-top: 52rpx;

		.bag {
			padding: 32rpx 24rpx;

			.left {
				font-weight: bold;
				font-size: 28rpx;
				color: #333A47;
				padding-bottom: 12rpx;
			}

			.right {
				width: 478rpx;
				border-bottom: 1px solid #F7FAFF;
				padding-bottom: 12rpx;
			}
		}


	}



	.btn {
		width: 690rpx;
		height: 98rpx;
		background: #3377FF;
		border-radius: 14rpx;
		color: #Fff;
		position: absolute;
		bottom: 150rpx;
		left: 32rpx;
	}

	.botbg {
		position: absolute;
		bottom: 50rpx;
		width: 750rpx;
	}
</style>